<template>
	<div class="cl-upload">
		<el-upload
			class="upload-demo"
			:action="action"
			size="mini"
			:headers="{
				Authorization: token
			}"
			accept="image/*"
			list-type="picture-card"
			:auto-upload="true"
			:on-preview="handlePreview"
			:on-remove="handleRemove"
			:before-remove="beforeRemove"
			ref="opload"
			:limit="5"
			:on-exceed="handleExceed"
			:on-success="onSuccess"
			:file-list="fileList"
		>
			<i class="el-icon-plus"></i>
		</el-upload>
		<el-dialog class="my-dialog" :modal="false" :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="" />
		</el-dialog>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	name: 'feil-list',
	props: {
		props: {
			type: Object,
			default: () => {
				return {};
			}
		},
		value: [Array, String]
	},

	data() {
		const upload = this.$service.common.upload();
		return {
			action: upload.url,
			fileList: [],
			dialogImageUrl: '',
			dialogVisible: false,
			valueRefresh: true
		};
	},

	computed: {
		...mapGetters(['token'])
	},
	watch: {
		value(val) {
			if (!val) {
				return;
			}
			if (!this.valueRefresh) {
				return;
			}
			if (val instanceof Array) {
				this.fileList = val;
			} else {
				console.log(val);
				let list = val.split(',').map(item => {
					return {
						url: item,
						uid: parseInt(Math.random() * 1000000),
						response: {
							data: item
						}
					};
				});
				console.log(list);
				this.fileList = list;
			}
			this.valueRefresh = false;
		}
	},
	mounted() {},

	methods: {
		callback() {
			this.$emit(
				'input',
				this.fileList
					.map(e => {
						return e.response ? e.response.data : '';
					})
					.join(',')
			);
		},
		// eslint-disable-next-line
		onSuccess(response, file, fileList) {
			console.log(fileList);
			this.fileList = fileList;
			this.callback();
		},
		// eslint-disable-next-line
		handleRemove(file, fileList) {
			this.fileList = fileList;
			this.callback();
		},
		handlePreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		handleExceed(files) {
			this.$message.warning(
				`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length +
					this.fileList.length} 个文件`
			);
		},
		beforeRemove() {
			return this.$confirm(`确定移除 该图片？`);
		}
	}
};
</script>

<style lang="stylus" scoped>
.cl-upload {
	display: flex;
	flex-wrap: wrap;

	.upload-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120px;
		width: 120px;
		cursor: pointer;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		margin-right: 10px;
		position: relative;

		.el-icon-plus {
			font-size: 28px;
			color: #8c939d;
		}

		.el-icon-close {
			position: absolute;
			right: 5px;
			top: 5px;
			color: red;
			background-color: #F56C6C;
			color: #fff;
			border-radius: 100%;
			padding: 2px;

			&:hover {
				background-color: red;
			}
		}

		img {
			height: 100%;
			width: 100%;
			border-radius: 6px;
		}

		&:hover {
			border: 1px dashed #409EFF;
		}
	}
}
</style>
